<template>
  <el-row :gutter="32" class="wrapper">
    <el-col class="box" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in goods" :key="item.id">
      <good-box2 class="item" :good="item" :max='10'/>
    </el-col>
  </el-row>
</template>

<script>
import GoodBox2 from '@/components/general/goods/GoodBox2'
import product1 from '@img/product/product-1.jpg'
import { queryNewProductsPage } from '@/api/ApiGoodDetail'
import { ResultCode } from '@/constants/constants'

export default {
  name: 'pageGoods',
  components: {
    'good-box2': GoodBox2
  },
  data: () => {
    return {
      loading: false,
      goods: []
    }
  },
  methods: {
    convertDetailToItem (detail) {
      const item = {}
      item.id = detail.id
      item.title = detail.name
      item.hot = detail.score
      if (detail['subGoodList'] && typeof detail['subGoodList'] === 'object') {
        detail['subGoodList'].forEach((sub, index) => {
          if (index === 0) {
            item.price = sub.price
          }
          if (item.price > sub.price) {
            item.price = sub.price
          }
        })
      }
      const pictures = detail['goodPictureList']
      if (pictures && typeof pictures === 'object') {
        if (pictures.length === 0) {
          item.view1 = product1
          item.view2 = product1
        }
        if (pictures.length === 1) {
          item.view1 = pictures[0].image
          item.view2 = pictures[0].image
        }
        if (pictures.length > 1) {
          item.view1 = pictures[0].image
          item.view2 = pictures[1].image
        }
      }
      return item
    }
  },
  mounted () {
    this.loading = true
    queryNewProductsPage(1, 8, data => {
      if (data && data.code === ResultCode.OK) {
        this.goodsData = data.object['records']
        const list = []
        this.goodsData.forEach(item => {
          list.push(this.convertDetailToItem(item))
        })
        this.goods = list
      }
    }, () => {
      this.loading = false
    })
  }
}
</script>

<style lang="scss" scoped>
  .wrapper{

    .box{
      margin-bottom: 35px;

      .item{
        margin: auto;
      }

    }

  }
</style>
